@import "utils";

.login-form {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 2rem;
  .sent-email {
    display: flex;
    align-items: center;
    background: $oc-green-2;
    color: $oc-green-9;
    padding: 1rem;
    svg {
      font-size: 1.5rem;
    }
    .text {
      margin-left: 0.5rem;
    }
  }
  .input-with-button {
    display: flex;
    input {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      display: block;
      flex: 1;
      outline: none;
      border: none;
      padding: 1rem;
      font-size: 1.2rem;
    }
    .button {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      width: 6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-weight: 600;
      transition: background 0.15s ease-in;
      background: $oc-violet-6;
      cursor: pointer;
      user-select: none;
      @include hover() {
        background: $oc-violet-5;
      }
      &:active {
        background: $oc-violet-7;
      }
    }
    transition: opacity 0.3s ease-in;
    &.sending {
      opacity: 0.75;
      .button {
        cursor: default;
      }
    }
  }
  .separator {
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    margin-top: 2rem;
    margin-bottom: 2rem;
    position: relative;
    .or {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background: $oc-gray-8;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.75);
    }
  }
}
